import React, {Component} from 'react';
import {Input, Table, Button, message, Tabs} from 'antd';
import "./UpperPartOfTheForm.css"

const TabPane = Tabs.TabPane;

class UpperPartOfTheForm extends Component {
    constructor(props) {
        super(props);
        this.state = {
            Time: [],//第一列的时间变化自动控制
            Data: [],//原始填写的数据
            TabChoose: 0,
            average: [null, null, null, null, null, null, null, null, null,
                null, null, null, null, null, null, null, null, null,
                null, null, null, null, null, null, null, null, null],//平均
            ratio: [null, null, null, null, null, null, null, null, null,
                null, null, null, null, null, null, null, null, null,
                null, null, null, null, null, null, null, null, null,],//比值
            passRate: [null, null, null, null, null, null, null, null, null,
                null, null, null, null, null, null, null, null, null,
                null, null, null, null, null, null, null, null, null,],//合格率
            isNormal: [],
            // person: this.props.person
        }
    }

    /**
     * 第一列的时间变化
     */
    componentWillMount() {
        const BanCi = ['零点班', '八点班', '十六点班'];
        this.setState({
            BanCi: BanCi[this.props.timeChose],
            Data: this.props.upperData,
        });
    }

    /**更新props**/
    componentWillReceiveProps(nextProps) {
        const BanCi = ['零点班', '八点班', '十六点班'];
        this.setState({
            BanCi: BanCi[nextProps.timeChose],
            Data: nextProps.upperData,
        });
    }

    /**
     * 表格输入数据变化的监听，同时所有的数据更新
     **/
    onInputNumberChange2 = (event, indexH, indexL) => {
        let NewData = this.state.Data;
        let xiaoshi = indexH + this.props.timeChose * 8;
        const rep = /^(\-)*(\d+)\.(\d{2}).*$/;
        event = event.replace(rep, '$1$2.$3');
        NewData[xiaoshi]["shuju"][indexL] = event;
        this.setState({
            Data: NewData
        });
    };

    //控制输入框的样式
    changeStyle = (value) => {
        if (value) {
            // if (isNaN(value) || value > 100) {
            //     return {
            //         borderColor: 'red',
            //         color:'red',
            //     }
            // }
            if (isNaN(value)) {
                return {
                    borderColor: 'red',
                    color: 'red',
                }
            }
        }
    }

    //上传当前数据后台
    /**点击暂存之后上传当前行的数据到后台**start**/
    postToHome(i) {//i是行数
        const xiaoshi = i + this.props.timeChose * 8;
        const a = this.state.Data[xiaoshi]['shuju'];
        const shuju = a.join(',');
        const jsondata = {
            "data": [
                {
                    "riqi": this.props.riqi,
                    "xiaoshi": xiaoshi,
                    "leixing": "ZKSX2",
                    "zhonglei": 1,
                    "shuju": shuju,
                    "name": window.localStorage.name,
                }
            ]
        };
        fetch("/api/ZhongKS/save", {
            method: 'POST',
            body: JSON.stringify(jsondata), // data can be `string` or {object}!
            headers: {
                'Content-Type': 'application/json',
                'authorization': window.localStorage.authorization,
            }
        })
            .then(res => res.json())
            .then(data => {
                if (data['code'] === 0) {
                    message.info('暂存'+xiaoshi+'点钟数据成功');
                    const Data = this.state.Data;
                    Data[xiaoshi]['name'] = window.localStorage.name;
                    this.setState({
                        Data: Data
                    })
                }
            })
            .catch(error => console.error('Error:', error))
            .then(response => console.log('Success:', response));
    }

    /**点击暂存之后上传当前行的数据到后台**end**/
    render() {
        /**表头的设计**start**/
        const columns = [
            {
                title: '班次',
                dataIndex: 'time',
                width: '10%',
                render: (value, row, index) => {
                    const obj = {
                        children: value,
                        props: {}
                    };
                    if (index === 0) {
                        obj.props.rowSpan = 8;
                    }
                    if (index === 1) {
                        obj.props.colSpan = 0;
                    }
                    if (index === 2) {
                        obj.props.colSpan = 0;
                    }
                    if (index === 3) {
                        obj.props.colSpan = 0;
                    }
                    if (index === 4) {
                        obj.props.colSpan = 0;
                    }
                    if (index === 5) {
                        obj.props.colSpan = 0;
                    }
                    if (index === 6) {
                        obj.props.colSpan = 0;
                    }
                    if (index === 7) {
                        obj.props.colSpan = 0;
                    }
                    return obj;
                },
            },
            {
                title: '窑转速',
                key: 'YZS',
                width: '15%',
                children: [{
                    title: 'rpm',
                    dataIndex: 'YZS',
                }],
            },
            {
                title: '窑电流',
                key: 'YDL',
                width: '15%',
                children: [
                    {
                        title: 'A',
                        dataIndex: 'YDL'
                    },
                ],
            },
            {
                title: '生料喂料量',
                key: 'SLWL',
                width: '15%',
                children:
                    [{
                        title: 't/h',
                        dataIndex: 'SLWL'
                    }]
            },
            {
                title: '窑头喂煤量',
                key: 'YTWM',
                width: '15%',
                children: [
                    {
                        title: 't/h',
                        dataIndex: 'YTWM'
                    }
                ],
            },
            {
                title: '窑尾喂煤量',
                key: 'YWWM',
                width: '15%',
                children: [
                    {
                        title: 't/h',
                        dataIndex: 'YWWM'
                    }
                ],
            },
            {
                title: '人员',
                dataIndex: 'person',
                width: '7.5%',
            },
            {
                title: '暂存',
                dataIndex: 'btn_save',
                width: '7.5%',
            },
        ];

        /**表头的设计**end**/

        /**限制输入数值位数的函数**start**/
        const limitDecimals = (value: string | number): string => {
            const reg = /^(\-)*(\d+)\.(\d\d).*$/;
            if (typeof value === 'string') {
                return !isNaN(Number(value)) ? value.replace(reg, '$1$2.$3') : ''
            } else if (typeof value === 'number') {
                return !isNaN(value) ? String(value).replace(reg, '$1$2.$3') : ''
            } else {
                return ''
            }
        };
        /**限制输入数值位数的函数**end**/

        /**中间八行的数据输入**start**/
        const data = [];
        const Data = this.state.Data;
        for (let i = 0; i < 8; i++) {
            const xiaoshi = i + this.props.timeChose * 8;
            const value = Data[xiaoshi]['shuju'];
            data.push(
                {
                    time: this.state.BanCi,
                    YZS: <span><Input

                        style={this.changeStyle(value[0])}
                        defaultValue={''}
                        value={isNaN(value[0]) ? null : value[0]}
                        onChange={event => this.onInputNumberChange2(event.target.value, i, 0)}
                    /></span>,
                    YDL: <span><Input

                        style={this.changeStyle(value[1])}
                        defaultValue={''}
                        value={isNaN(value[1]) ? null : value[1]}
                        onChange={event => this.onInputNumberChange2(event.target.value, i, 1)}
                    /></span>,
                    SLWL: <span><Input

                        style={this.changeStyle(value[2])}
                        defaultValue={''}
                        value={isNaN(value[2]) ? null : value[2]}
                        onChange={event => this.onInputNumberChange2(event.target.value, i, 2)}
                    /></span>,
                    YTWM: <span><Input

                        style={this.changeStyle(value[3])}
                        defaultValue={''}
                        value={isNaN(value[3]) ? null : value[3]}
                        onChange={event => this.onInputNumberChange2(event.target.value, i, 3)}
                    /></span>,
                    YWWM: <span><Input

                        style={this.changeStyle(value[4])}
                        defaultValue={''}
                        value={isNaN(value[4]) ? null : value[4]}
                        onChange={event => this.onInputNumberChange2(event.target.value, i, 4)}
                    /></span>,
                    person: Data[xiaoshi]['name'],
                    btn_save: <Button type='primary' onClick={() => this.postToHome(i)}>暂存</Button>,
                })
        }

        /**中间八行的数据输入**end**/

        return (
            <div className="ZKSX2_upper">
                {/*表格填写*/}
                <Table
                    className="ZKSX2_upper_table" columns={columns} bordered
                    dataSource={data} pagination={false}/>

            </div>
        );
    }

}

export default UpperPartOfTheForm;